import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

import { Navbar } from './app/Navbar'
import { AddPostForm } from './features/posts/AddPostForm'
import { PostsList } from './features/posts/PostsList'
import { SinglePostPage } from './features/posts/SinglePostPage'
import { EditPostForm } from './features/posts/EditPostForm'

import { UsersList } from './features/users/UsersList'
import { UserPage } from './features/users/UserPage'

import { NotificationsList } from './features/notifications/NotificationsList'

function App() {
  return (
    <Router>
      <Navbar />
      <div className="App">
        <Routes>
          {/* https://reactrouter.com/en/main/route/route */}
          <Route
            exact
            path="/"
            element={
              <React.Fragment>
                <AddPostForm />
                <PostsList />
              </React.Fragment>
            }
          />
          <Route
            exact
            path="/posts/:postId"
            element={
              <React.Fragment>
                <SinglePostPage />
              </React.Fragment>
            }
          />
          <Route
            exact
            path="/editPost/:postId"
            element={
              <React.Fragment>
                <EditPostForm />
              </React.Fragment>
            }
          />
          <Route
            exact
            path="/users"
            element={
              <React.Fragment>
                <UsersList />
              </React.Fragment>
            }
          />
          <Route
            exact
            path="/users/:userId"
            element={
              <React.Fragment>
                <UserPage />
              </React.Fragment>
            }
          />
          <Route
            exact
            path="/notifications"
            element={
              <React.Fragment>
                <NotificationsList />
              </React.Fragment>
            }
          />
        </Routes>
      </div>
    </Router>
  )
}

export default App
